<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>سىناق بەت</title>
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/style.css">
	
</head>
	
<body>
 <div class="container text-center top20">
 	<h1 class="center">سالام Bootstrap</h1>
 </div>
 	
 	<div class="container top20">
 		<h1>بەلگە</h1>
 		
 			<h1>مىسال ماۋزۇ <span class="badge badge-secondary">يېڭى</span></h1>
			<h2>مىسال ماۋزۇ <span class="badge badge-secondary">يېڭى</span></h2>
			<h3>مىسال ماۋزۇ <span class="badge badge-secondary">يېڭى</span></h3>
			<h4>مىسال ماۋزۇ <span class="badge badge-secondary">يېڭى</span></h4>
			<h5>مىسال ماۋزۇ <span class="badge badge-secondary">يېڭى</span></h5>
			<h6>مىسال ماۋزۇ <span class="badge badge-secondary">يېڭى</span></h6>
			
				<button type="button" class="btn btn-primary top20">
				  ئۇقتۇرۇش <span class="badge badge-light">4</span>
				</button>
				
				
				
				<nav class="top20" aria-label="breadcrumb">
				  <ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">باشبەت</a></li>
					<li class="breadcrumb-item"><a href="#">كۈتۈپخانا</a></li>
					<li class="breadcrumb-item active" aria-current="page">سانلىق مەلۇمات</li>
				  </ol>
				</nav>
			
 	</div>
 	<div class="container top20">
 		<h1>كۇنۇپكىلار</h1>
 		
 		<button type="button" class="btn btn-primary">كۇنۇپكا</button>
		<button type="button" class="btn btn-secondary">كۇنۇپكا</button>
		<button type="button" class="btn btn-success">كۇنۇپكا</button>
		<button type="button" class="btn btn-danger">كۇنۇپكا</button>
		<button type="button" class="btn btn-warning">كۇنۇپكا</button>
		<button type="button" class="btn btn-info">كۇنۇپكا</button>
		<button type="button" class="btn btn-light">كۇنۇپكا</button>
		<button type="button" class="btn btn-dark">كۇنۇپكا</button>
		<button type="button" class="btn btn-link">كۇنۇپكا</button>
 	</div>
 	<div class="container top20">
 		<button type="button" class="btn btn-outline-primary">كۇنۇپكا</button>
		<button type="button" class="btn btn-outline-secondary">كۇنۇپكا</button>
		<button type="button" class="btn btn-outline-success">كۇنۇپكا</button>
		<button type="button" class="btn btn-outline-danger">كۇنۇپكا</button>
		<button type="button" class="btn btn-outline-warning">كۇنۇپكا</button>
		<button type="button" class="btn btn-outline-info">كۇنۇپكا</button>
		<button type="button" class="btn btn-outline-light">كۇنۇپكا</button>
		<button type="button" class="btn btn-outline-dark">كۇنۇپكا</button>
	</div>
	<div class="container top20">
		<button type="button" class="btn btn-primary btn-lg btn-block">چەكلەش كۇنۇپكىسى</button>
		<button type="button" class="btn btn-secondary btn-lg btn-block">چەكلەش كۇنۇپكىسى</button>
	</div>
	<div class="container top20">
		<h1>كۇنۇپكا گۇرۇپپىسى</h1>
		<div class="btn-group" role="group" aria-label="Basic example">
		  <button type="button" class="btn btn-secondary">وڭ</button>
		  <button type="button" class="btn btn-secondary">ئوتتۇرا</button>
		  <button type="button" class="btn btn-secondary">سول</button>
	  	</div>
	</div>
	<div class="container top20">
		<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
		  <div class="btn-group mr-2" role="group" aria-label="First group">
			<button type="button" class="btn btn-secondary">1</button>
			<button type="button" class="btn btn-secondary">2</button>
			<button type="button" class="btn btn-secondary">3</button>
			<button type="button" class="btn btn-secondary">4</button>
		  </div>
		  <div class="btn-group mr-2" role="group" aria-label="Second group">
			<button type="button" class="btn btn-secondary">5</button>
			<button type="button" class="btn btn-secondary">6</button>
			<button type="button" class="btn btn-secondary">7</button>
		  </div>
		  <div class="btn-group" role="group" aria-label="Third group">
			<button type="button" class="btn btn-secondary">8</button>
		  </div>
		</div>
		
	</div>
	<div class="container top20">
		<div class="container top20">
			<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
	  <div class="btn-group mr-2" role="group" aria-label="First group">
		<button type="button" class="btn btn-secondary">1</button>
		<button type="button" class="btn btn-secondary">2</button>
		<button type="button" class="btn btn-secondary">3</button>
		<button type="button" class="btn btn-secondary">4</button>
	  </div>
	  <div class="input-group">
		<div class="input-group-prepend">
		  <div class="input-group-text" id="btnGroupAddon">@</div>
		</div>
		<input type="text" class="form-control" placeholder="گۇرۇپپا مىسالى" aria-label="Input group example" aria-describedby="btnGroupAddon">
	  </div>
	</div>

	<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
	  <div class="btn-group" role="group" aria-label="First group">
		<button type="button" class="btn btn-secondary">1</button>
		<button type="button" class="btn btn-secondary">2</button>
		<button type="button" class="btn btn-secondary">3</button>
		<button type="button" class="btn btn-secondary">4</button>
	  </div>
	  <div class="input-group">
		<div class="input-group-prepend">
		  <div class="input-group-text" id="btnGroupAddon2">@</div>
		</div>
		<input type="text" class="form-control" placeholder="گۇرۇپپا مىسالى" aria-label="Input group example" aria-describedby="btnGroupAddon2">
	  </div>
	</div>
		</div>
		
		<div class="container top20" style="display: flex" >
				<div class="card l10"  style="width: 18rem;">
				  <img data-src="holder.js/100px200" class="card-img-top" alt="...">
				  <div class="card-body">
					<h5 class="card-title">كارتا ئىسمى</h5>
					<p class="card-text">كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.</p>
					<a href="#" class="btn btn-primary">سېتىۋېلىش</a>
				  </div>
				</div>

				<div class="card l10"  style="width: 18rem;">
				  <img data-src="holder.js/100px200" class="card-img-top" alt="...">
				  <div class="card-body">
					<h5 class="card-title">كارتا ئىسمى</h5>
					<p class="card-text">كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.</p>
					<a href="#" class="btn btn-primary">سېتىۋېلىش</a>
				  </div>
				</div>

				<div class="card l10"  style="width: 18rem;">
				  <img data-src="holder.js/100px200" class="card-img-top" alt="...">
				  <div class="card-body">
					<h5 class="card-title">كارتا ئىسمى</h5>
					<p class="card-text">كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.</p>
					<a href="#" class="btn btn-primary">سېتىۋېلىش</a>
				  </div>
				</div>

		
		
	</div>
	</div>
		
	
	<div class="container top20">
		<h1>جەدۋەل</h1>
		
		<form>
		  <div class="form-row">
			<div class="form-group col-md-6">
			  <label for="inputEmail4">ئېلخەت</label>
			  <input type="email" class="form-control" id="inputEmail4">
			</div>
			<div class="form-group col-md-6">
			  <label for="inputPassword4">پارول</label>
			  <input type="password" class="form-control" id="inputPassword4">
			</div>
		  </div>
		  <div class="form-group">
			<label for="inputAddress">ئادرېس</label>
			<input type="text" class="form-control" id="inputAddress" placeholder="ئۈرۈمچى شەھىرى
		">
		  </div>
		  <div class="form-group">
			<label for="inputAddress2">ئادرېس 2</label>
			<input type="text" class="form-control" id="inputAddress2" placeholder="ئۈرۈمچى شەھىرى يەنئەن يولى 
		">
		  </div>
		  <div class="form-row">
			<div class="form-group col-md-6">
			  <label for="inputCity">شەھەر</label>
			  <input type="text" class="form-control" id="inputCity">
			</div>
			<div class="form-group col-md-4">
			  <label for="inputState">دۆلەت</label>
			  <select id="inputState" class="form-control">
				<option selected>تاللاڭ...</option>
				<option>...</option>
			  </select>
			</div>
			<div class="form-group col-md-2">
			  <label for="inputZip">پوچتا نومۇرى</label>
			  <input type="text" class="form-control" id="inputZip">
			</div>
		  </div>
		  <div class="form-group">
			<div class="form-check">
			  <input class="form-check-input" type="checkbox" id="gridCheck">
			  <label class="form-check-label" for="gridCheck">
				مېنى تەكشۈرۈپ بېقىڭ
			  </label>
			</div>
		  </div>
		  <button type="submit" class="btn btn-primary">تىزىملىتىڭ</button>
		</form>
	</div>
	
	<div class="container top20">
	<h1>كىرگۈزۈش گۇرۇپپىسى</h1>
		<div class="input-group mb-3">
		  <div class="input-group-prepend">
			<span class="input-group-text" id="basic-addon1">@</span>
		  </div>
		  <input type="text" class="form-control" placeholder="ئىشلەتكۈچى ئىسمى" aria-label="Username" aria-describedby="basic-addon1">
		</div>

		<div class="input-group mb-3">
		  <input type="text" class="form-control" placeholder="تاپشۇرۇۋالغۇچىنىڭ ئىشلەتكۈچى ئىسمى" aria-label="Recipient's username" aria-describedby="basic-addon2">
		  <div class="input-group-append">
			<span class="input-group-text" id="basic-addon2">@example.com</span>
		  </div>
		</div>

		<label for="basic-url">Your vanity URL</label>
		<div class="input-group mb-3">
		  <div class="input-group-prepend">
			<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
		  </div>
		  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
		</div>

		<div class="input-group mb-3">
		  <div class="input-group-prepend">
			<span class="input-group-text">$</span>
		  </div>
		  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
		  <div class="input-group-append">
			<span class="input-group-text">.00</span>
		  </div>
		</div>

		<div class="input-group">
		  <div class="input-group-prepend">
			<span class="input-group-text">With textarea</span>
		  </div>
		  <textarea class="form-control" aria-label="With textarea"></textarea>
		</div>
	</div>
	
	<div class="container top20">
		<h1>يولباشچى ستونى</h1>
		
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">بىلىملەر مۈنبىرى</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">باشبەت <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ئۇلىنىش</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          چۈشۈرۈش كۇنۇپكىسى
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">ھەرىكەت</a>
          <a class="dropdown-item" href="#">باشقا ھەرىكەت</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">بۇ يەردە باشقا بىر نەرسە</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">چەكلەنگەن</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="ئىزدەش" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">ئىزدەش</button>
    </form>
  </div>
</nav>
	</div>
	
	<div class="container top20">
		<h1>بەتكە بۈلۈش</h1>
		
		<nav aria-label="Page navigation example">
		  <ul class="pagination">
			<li class="page-item"><a class="page-link" href="#">ئالدىنقى</a></li>
			<li class="page-item"><a class="page-link" href="#">1</a></li>
			<li class="page-item"><a class="page-link" href="#">2</a></li>
			<li class="page-item"><a class="page-link" href="#">3</a></li>
			<li class="page-item"><a class="page-link" href="#">كېيىنكى</a></li>
		  </ul>
		</nav>
	</div>
	<div class="container top20">
		<h1>ئىلگىرىلەش</h1>

		<div class="progress top10">
		  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
		</div>
		<div class="progress top10">
		  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
		</div>
		<div class="progress top10">
		  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
		</div>
		<div class="progress top10">
		  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
		</div>
		<div class="progress top10">
		  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
		</div>

		
	</div>
	
	<div class="container top20">
		<div class="spinner-border text-primary" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-secondary" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-success" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-danger" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-warning" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-info" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-light" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-dark" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
	</div>
	
	<div class="container top20">
		<h1>جەدۋەل</h1>
		
		<table class="table table-sm">
		  <thead>
			<tr class="bg-primary">
			  <th scope="col">#</th>
			  <th scope="col">First</th>
			  <th scope="col">Last</th>
			  <th scope="col">Handle</th>
			</tr>
		  </thead>
		  <tbody>
			<tr class="bg-success">
			  <th scope="row">1</th>
			  <td>Mark</td>
			  <td>Otto</td>
			  <td>@mdo</td>
			</tr>
			<tr class="bg-warning">
			  <th scope="row">2</th>
			  <td>Jacob</td>
			  <td>Thornton</td>
			  <td>@fat</td>
			</tr>
			<tr class="bg-danger">
			  <th scope="row">3</th>
			  <td colspan="2">Larry the Bird</td>
			  <td>@twitter</td>
			</tr>
		  </tbody>
		</table>
	</div>
	
	<script src="js/jquery-3.5.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/holder.js"></script>
</body>
</html>